<template>
	<view class="userinfo-info-page">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="修改信息" isBackShow></free-nav-bar>
		<!-- #endif -->
		<view class="userinfo-wrapper">
			<view class="input-wrapper avater flex">
				<view class="label main-text-color">头像</view>
				<view class="flex select__wrapper">
					<view class="select__content" style="height: 110rpx;">
						<uni-file-picker class="upload-box" limit="1" style="width: 140rpx;height: 140px;line-height: 120px;"
							file-mediatype="image"							
							file-extname="png,jpg,jpeg"
							:auto-upload="false"
							:imageStyles="imageStyles"
							:border="false"
							:del-icon="false"
							@progress="progressHandle" 
							@success="uploadSuccess" 
							@delete="removeHandle"
							@select="selectFile">
							<image v-if="userInfo.avatar" class="img" :src="userInfo.avatar"></image>
							<image v-else class="img" src="../../static/images/avatar.png"></image>	
						</uni-file-picker>
					</view>
					<view class="select"><uni-icons type="right" size="20"></uni-icons></view>
				</view>
			</view>
			<view class="input-wrapper flex">
				<view class="label main-text-color">昵称</view>
				<view class="flex select__wrapper" @click="editHandle(1)">
					<view class="select__content main-text-color">{{userInfo.nickname}}</view>
					<view class="select">
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="input-wrapper flex">
				<view class="label main-text-color">性别</view>
				<view class="flex select__wrapper" @click="editHandle(2)">
					<view class="select__content main-text-color" v-if="userInfo.sex == 0" >女</view>
					<view class="select__content main-text-color" v-else >男</view>
					<view class="select"><uni-icons type="right" size="20"></uni-icons></view>
				</view>
			</view>
			<view class="input-wrapper flex" style="margin-top: 16rpx;">
				<view class="label main-text-color">绑定号码</view>
				<view class="flex select__wrapper" @click="editHandle(3)">
					<view class="select__content main-text-color" v-if="userInfo.mobile && userInfo.mobile != 'null'" >{{userInfo.mobile}}</view>
					<view class="select__content main-text-color" v-else >还未绑定号码</view>
					<view class="select"><uni-icons type="right" size="20"></uni-icons></view>
				</view>
			</view>			
		</view>
		<hqs-popup :title="title" v-model="showPopup">
			<view class="form-class">
				<view v-if="formType == 1" style="padding: 20rpx;">
					<input class="uni-input" v-model="userInfo.nickname" focus placeholder="输入昵称" />
				</view>
				<view v-if="formType == 2" >
					<uni-data-select
					        v-model="userInfo.sex"
					        :localdata="sexOptions"				      
					        :clear="false"
					      ></uni-data-select>
				</view>
				<view v-if="formType == 3" style="padding: 20rpx;">
					<uni-row style="width: 100%;height: 100rpx;">
						<uni-col :span="24" >
							<input class="uni-input" style="height: 80rpx;padding: 20rpx 0px;" v-model="userInfo.mobile" focus placeholder="输入手机号" />
							<span style="display: block;;width: 100%;height: 1rpx;background: #CCCCCC;"></span>
						</uni-col>
					</uni-row>
					<uni-row style="width: 100%;height: 100rpx;">
						<uni-col :span="15">
							<input style="height: 80rpx;padding: 20rpx 0px;" class="uni-input" v-model="smsCode" focus placeholder="输入验证码" />
						</uni-col>
						<uni-col :span="9">
							<button class="send-code" @click="sendCodeHandle"
								:plain="true"
								style="border:none"
							    :disabled="isSend">
								<span v-if="!isSend">{{sendBtnTitle}}</span>
								<uni-countdown v-else :show-day="false"
								    style="width: 100%;height: 80rpx;margin-left: 70rpx;"
									:show-hour="false" 
									:show-minute="false" 
									:second="countMinut"
									@timeup="timeUpdateHandle">
								</uni-countdown>
							</button>							
						</uni-col>
					</uni-row>
					<span style="display: block;;width: 100%;height: 1rpx;background: #CCCCCC;"></span>
				</view>
				<view class="add-btn-box">
					<button class="add-btn" @click="submitForm">确 定</button>
				</view>
			</view>		   
		</hqs-popup>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import hqsPopup from '@/components/hqs-popup/hqs-popup.vue'
	import uniIcon from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				title: '修改昵称',
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				showPopup: false,
				formType: 1,
				userInfo: {},
				sendBtnTitle: '发送验证码',
				smsCode: '',
				countMinut: 60,
				isSend: false,
				sexOptions: [
				          { value: 0, text: "女" },
				          { value: 1, text: "男" }
				]
			}
		},
		onLoad(e) {
			this.getUserInfo();
		},
		onShow() {
			
		},
		created() {
			
		},
		methods: {
			sendCodeHandle() {
				this.isSend = true;
			},
			timeUpdateHandle() {
				this.isSend = false;
				this.sendBtnTitle = '重新发送';
			},
			async submitForm() {
				let _this = this;
				if(this.formType == 3) {
					if(!$U.isValidPhoneNumber(this.userInfo.mobile)) {
						uni.showToast({
							title: '手机号不正确',
							icon: 'none'
						});
						return;
					}
					if(this.smsCode == null || this.smsCode == '' || this.smsCode == undefined) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return;
					}
					$H.put('/member/user/update-mobile',{code: this.smsCode, mobile: this.userInfo.mobile}).then(res => {
						_this.showPopup = false;
					})
				}
				else {
					let check = await $U.checkText(this.userInfo.nickname);
					if(check) {
						$H.put('/member/user/update',{nickname: this.userInfo.nickname, sex: this.userInfo.sex}).then(res => {
							_this.showPopup = false;
						})
					}
					else {
						uni.showToast({
							title: '监测到您所填内容可能包含违规内容，请更正，谢谢配合！',
							icon: 'none'
						});
					}
				}
				
				
				
			},
			progressHandle(e) {},
			uploadSuccess(e) {},
			selectFile(e) {
				console.log(e)
				let files = e.tempFilePaths;
				let _this = this;
				if(files && files.length >= 1) {
					uni.showLoading({
						title: '',
						mask: true
					});					
					let _this = this;
					let tempF = files[0];
					$H.upload('/infra/file/upload', {filePath: tempF, name: 'file'}).then(res => {
						if(res) {
							$H.put('/member/user/update',{avatar: res}).then(res => {
								_this.getUserInfo();
								 uni.hideLoading();					 
							}).catch(() => {
								uni.hideLoading();
							})
						}
						else {
							uni.hideLoading();
						}
					}).catch(() => {
						uni.hideLoading();
					})
					
					
				}
			},			
			editHandle(type) {
				let _this = this;
				this.formType = type;
				switch(type) {
					case 1: 
					    _this.title = '修改昵称';
					    break;
					case 2:
					    _this.title = '修改性别';
					    break;
					case 3:
						_this.title = '修改手机号';
						break;
				}
				this.showPopup = true
			},
			getUserInfo() {
				let _this = this;
				$H.get('/member/user/get').then(res => {
					if(res) {
						_this.userInfo = res;
					}
				})
			},
			handleFruits() {
				this.showPopup = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	/deep/ .file-picker__box-content {		
		border: none !important;
	}
	.userinfo-info-page {
		.userinfo-wrapper {
			padding-top: 16rpx;
		}
		.input-wrapper {
			position: relative;
			padding-left: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #fff;
			border-bottom: 1px solid #EBEBEB;
			
			&:last-child {
				border-bottom: none;
			}
			&.avater {
				height: 128rpx;
				line-height: 128rpx;
				
				.select__content {
					height: 80rpx;
					/deep/ .uni-file-picker__container {
						width: 150rpx;
						height: 140rpx;
						line-height: 140rpx;
						float: right;
						/deep/ .file-picker__box {
							width: 100% !important;
							height: 100% !important;
							border: none;
						}
						/deep/ .file-picker__box-content {
							width: 120rpx;
							height: 120rpx;
							border: none !important;
						}
						.img {
							display: inline-block;
							width: 90rpx;
							height: 90rpx;
							border-radius: 200px;
							background-color: #e8e5e5;
						}
					}
					
				}
			}
			&.license {
				height: 174rpx;
				line-height: 174rpx;
				border: none;
				margin-bottom: 16rpx;
				
				.select__content {
					height: 126rpx;
					
					.img {
						display: inline-block;
						width: 172rpx;
						height: 126rpx;
						background: pink;
					}
				}
			}
			.label {
				width: 200rpx;
				font-size: 28rpx;
			}
			.input {
				display: block;
				flex: 1;
				font-size: 28rpx;
				height: 88rpx;
				line-height: 88rpx;
			}
			.select__wrapper {
				flex: 1;
				align-items: center;
			}
			.select__content {
				flex: 1;
				font-size: 28rpx;
				padding-right: 80rpx;
				text-align: right;
			}
			.select {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				width: auto;
				padding-left: 40rpx;
				padding-right: 30rpx;
				height: 88rpx;
			}
		}
		.form-class {
			position: relative;
			width: 100%;
			height: 460rpx;
			.add-btn-box {
				position: absolute;
				bottom:0rpx;
				width: 100%;
				.add-btn {
					width: 690rpx;
					height: 74rpx;
					line-height: 75rpx;
					color: #fff;
					background: #FD5052;
					border-radius: 37rpx 37rpx 37rpx 37rpx;
				}
				
			}			
		}
	}
</style>
